<template>
	<view class="banner-box">
		<!-- 渐变背景色 开始 -->
		<view class="banner-bg" :style="{'background-image':`linear-gradient(${bannerBackground || '#345dc2'} 50%, #F8F9FB)`}">
		</view>
		<!-- 渐变背景色 结束-->
		
		<!-- 轮播图主体 开始-->
		<swiper class="banner-swiper" circular autoplay :interval="4000" @change="swiperChange" :current="current"
		 indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
			<swiper-item class="banner-item" v-for="(item,index) in bannerList" :key="index">
				<image :src="item.imageUrl"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图主体 结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, //当前所在的滑块index，用于刷新数据时切回第1张图
				bannerBackground: '' //当前滑块背景色
			}
		},

		methods: {
			swiperChange(e) {
				// 当前滑块的index
				this.current = e.detail.current
				// 轮播图切换时，背景颜色切换
				this.bannerBackground = this.bannerList[this.current].background

			}
		},

		props: {
			bannerList: {
				type: Array,
				default: () => [{
					id: 1,
					imageUrl: "/static/images/banner1.jpg",
					background: "#45328c",
					adverUrl: '/pages/course/course-details'
				}, {
					id: 2,
					imageUrl: "/static/images/banner2.jpg",
					background: "#006C00",
					adverUrl: '/pages/course/course-details'
				}, {
					id: 3,
					imageUrl: "/static/images/banner3.jpg",
					background: "#0072B7",
					adverUrl: '/pages/course/course-details'
				}]
			}
		},

		watch: {
			bannerList: {
				handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.current = 0
						this.bannerBackground = this.bannerList[0] && this.bannerList[0].background
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.banner-box {
		position: relative;
		padding-top: 120rpx;

		/*app和中有系统状态栏，比小程序和h5多占一点高度*/
		/* #ifdef APP-PLUS*/
		padding-top: calc(var(--status-bar-height) + 120rpx);
		/* #endif */

		.banner-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;

			/*app和中有系统状态栏，比小程序和h5多占一点高度*/
			/* #ifdef APP-PLUS*/
			height: calc(var(--status-bar-height) + 470rpx);
			/* #endif */

			/*过渡效果*/
			transition: .5s;
		}

		.banner-swiper {
			width: 100%;
			height: 350rpx;

			.banner-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}
	}
</style>
